<script>
import CardItems from '@/components/CardItems/index.vue'
import TreeCard from '@/components/TreeCard/index.vue'
import { cardConfig } from './config/cardConfig'
import { popConfig } from './config/popConfig'
import { selectConfig } from './config/selectConfig'
import { headerConfig } from './config/tableConfig'

export default {
  name: 'Carbonccer',
  components: { TreeCard, CardItems },
  data() {
    return {
      isExpand: true,
      expandLeft: 200,
      type: null,
      staticsData: {},
      nodeSelect: {},
      selectList: []
    }
  },
  created() {
    this.refreshStaticsData()
  },
  methods: {
    refreshStaticsData() {
      this.$api.carbonCcer.statics({}).then((response) => {
        this.staticsData = response.data
      })
    },
    onFinish() {
      this.refreshStaticsData()
    },
    // /**
    //  * 获取空间列表
    //  * @param sceneProjectId
    //  */
    // async getRoomList(sceneProjectId, selectList, selectData) {
    //   let roomList = []
    //   if (sceneProjectId != null && sceneProjectId !== '') {
    //     const res = await this.$api.sceneRoom.queryRoomList({
    //       sceneProjectId,
    //       sortColumn: 'floorName',
    //       sortOrder: 'asc'
    //     })
    //     roomList = parseSceneData(res.data)
    //   }
    //   const configItem = selectList[3]
    //   configItem.optionList = roomList
    //   this.$set(this.selectList, 3, {
    //     ...configItem
    //   })
    //   this.$refs.cardItemsRef.setSelectModuleValue({
    //     ...selectData
    //   })
    // },
    selectChange(selectData, prop, selectList) {
      this.selectList = JSON.parse(JSON.stringify(selectList))
      // if (prop === 'sceneProjectId') {
      //   this.getRoomList(selectData[prop], selectList, selectData)
      // }
      // if (prop === 'sceneInfo') {
      //   const infos = selectData[prop]
      //   selectData.sceneEdificeId = infos[0] || undefined
      //   selectData.sceneFloorId = infos[1] || undefined
      //   selectData.sceneRoomId = infos[2] || undefined
      // }
    }
  },
  computed: {
    cardConfig() {
      return cardConfig['carbon-ccer'] || {}
    },
    popConfig() {
      return popConfig['carbon-ccer'] || {}
    },
    selectConfig() {
      return selectConfig['carbon-ccer'] || []
    },
    /**
     * 表头配置
     */
    headerConfig() {
      return headerConfig['carbon-ccer'] || []
    }
  }
}
</script>

<template>
  <div class="carbon-ccer-box">
    <div class="card">
      <div class="card-item">
        <div class="value">{{ staticsData.totalValue }}</div>
        <div class="label">累计CCER</div>
      </div>
      <div class="card-item">
        <div class="value">{{ staticsData.purchasedValue }}</div>
        <div class="label">已购入CCER</div>
      </div>
      <div class="card-item">
        <div class="value">{{ staticsData.saleValue }}</div>
        <div class="label">已售出CCER</div>
      </div>
      <div class="card-item">
        <div class="value">{{ staticsData.remainingValue }}</div>
        <div class="label">剩余CCER</div>
      </div>
      <div class="card-item">
        <div class="value">{{ staticsData.carbonIncome }}</div>
        <div class="label">碳收益</div>
      </div>
    </div>
    <div class="CardItems-box">
      <CardItems
        ref="cardItemsRef"
        :card-config="cardConfig"
        :outer-params="nodeSelect"
        :pop-config="popConfig"
        :select-config="selectConfig"
        :header-config="headerConfig"
        :dynamic-select-list="selectList"
        @selectChange="selectChange"
        @onFinish="onFinish"
      />
    </div>
  </div>
</template>
<style scoped lang="scss">
.carbon-ccer-box {

  .card {
    display: flex;
    flex-direction: row;
    gap: 40px;
    width: 100%;
    justify-content: space-around;
    background: #ffffff;

    .card-item {
      padding: 20px 36px;
      background: rgba(242, 242, 242, 1);
      margin: 10px 0;
      text-align: center;
      line-height: 30px;
    }
  }

  .expand-box {
    position: absolute;
    top: 50%;
    height: 40px;
    line-height: 40px;
    width: 12px;
    text-align: center;
    margin-top: -20px;
    font-size: 12px;
    color: #909399;
    background-color: #ededed;
    border-radius: 0 4px 4px 0;
    transition: left 0.3s;
    cursor: pointer;
    z-index: 3;

    &:hover {
      background-color: #ddd;
    }

    .el-input__icon {
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;
    }
  }

  .TreeCard-box {
    height: 100%;
    transition: all 0.3s;

    .tree-card {
      border: 1px solid #eee;
      background-color: #fff;
    }

    &.is-expand {
      overflow: hidden;
      margin-right: 0;
    }
  }

  .CardItems-box {
    flex: 1;
  }
}
</style>

